<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WPF控件参考手册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        accent: '#36CFC9',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        neutral: '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-balance {
                text-wrap: balance;
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="font-inter bg-light text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200 transition-all duration-300">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-windows text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-primary">WPF控件参考手册</h1>
                </div>
                
                <!-- 搜索框 -->
                <div class="relative max-w-md w-full mx-4 hidden md:block">
                    <input id="search-input" type="text" placeholder="搜索控件..." 
                           class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral"></i>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-dark p-2">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            
            <!-- 分类导航 -->
            <nav id="category-nav" class="mt-2 overflow-x-auto scrollbar-hide hidden md:flex space-x-1">
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-primary text-white transition-all hover:bg-primary/90" data-category="all">全部</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="layout">布局控件</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="input">输入控件</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="display">显示控件</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="navigation">导航控件</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="data">数据控件</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="dialog">对话框控件</button>
                <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="other">其他控件</button>
            </nav>
        </div>
    </header>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="fixed inset-0 bg-dark/50 z-40 hidden">
        <div class="bg-white h-full w-64 p-4 shadow-lg transform transition-transform duration-300 -translate-x-full" id="mobile-menu-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">控件分类</h3>
                <button id="close-menu" class="text-neutral hover:text-dark">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="space-y-2">
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white transition-all hover:bg-primary/90" data-category="all">全部</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="layout">布局控件</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="input">输入控件</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="display">显示控件</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="navigation">导航控件</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="data">数据控件</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="dialog">对话框控件</button>
                <button class="mobile-category-btn w-full text-left px-4 py-2 rounded-lg text-sm font-medium bg-white text-dark transition-all hover:bg-gray-100" data-category="other">其他控件</button>
            </div>
            
            <!-- 移动端搜索框 -->
            <div class="relative mt-6">
                <input id="mobile-search-input" type="text" placeholder="搜索控件..." 
                       class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral"></i>
            </div>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 介绍部分 -->
        <section class="mb-10 text-center max-w-3xl mx-auto">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">WPF控件参考指南</h2>
            <p class="text-neutral text-lg mb-6 text-balance">探索Windows Presentation Foundation (WPF)中各种控件的功能和用法。本指南提供了每个控件的简要说明和示例代码，帮助你快速掌握WPF开发。</p>
            <div class="flex flex-wrap justify-center gap-2 mb-6">
                <span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">UI开发</span>
                <span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">.NET框架</span>
                <span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">XAML</span>
                <span class="px-3 py-1 bg-blue-50 text-primary rounded-full text-sm">C#</span>
            </div>
        </section>
        
        <!-- 控件统计 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            <div class="bg-white rounded-xl shadow-card p-4 flex items-center space-x-3 hover:shadow-card-hover transition-all">
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                    <i class="fa fa-th-large text-xl"></i>
                </div>
                <div>
                    <p class="text-neutral text-sm">布局控件</p>
                    <p class="font-bold text-lg">9</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-card p-4 flex items-center space-x-3 hover:shadow-card-hover transition-all">
                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                    <i class="fa fa-keyboard-o text-xl"></i>
                </div>
                <div>
                    <p class="text-neutral text-sm">输入控件</p>
                    <p class="font-bold text-lg">10</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-card p-4 flex items-center space-x-3 hover:shadow-card-hover transition-all">
                <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                    <i class="fa fa-picture-o text-xl"></i>
                </div>
                <div>
                    <p class="text-neutral text-sm">显示控件</p>
                    <p class="font-bold text-lg">8</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-card p-4 flex items-center space-x-3 hover:shadow-card-hover transition-all">
                <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                    <i class="fa fa-sitemap text-xl"></i>
                </div>
                <div>
                    <p class="text-neutral text-sm">导航控件</p>
                    <p class="font-bold text-lg">5</p>
                </div>
            </div>
        </div>
        
        <!-- 控件列表 -->
        <div id="controls-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 布局控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">TextBlock</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-font"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">用于显示只读文本的轻量级控件，比Label更高效，适合静态文本显示。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;TextBlock</code> <code class="text-purple-700">Text</code><code class="text-red-700">=</code><code class="text-green-700">"Hello, WPF!"</code> <code class="text-purple-700">FontSize</code><code class="text-red-700">=</code><code class="text-green-700">"16"</code> <code class="text-purple-700">Foreground</code><code class="text-red-700">=</code><code class="text-green-700">"#333"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Grid</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-th"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">灵活的网格布局控件，支持行和列的定义，可以精确控制子元素的位置和大小。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Grid&gt;</code><br>
                        <code class="text-gray-500">  &lt;Grid.RowDefinitions&gt;</code><br>
                        <code class="text-gray-500">    &lt;RowDefinition Height="Auto" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;RowDefinition Height="*" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/Grid.RowDefinitions&gt;</code><br>
                        <code class="text-gray-500">  &lt;TextBlock Text="标题" Grid.Row="0" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="按钮" Grid.Row="1" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/Grid&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">StackPanel</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-bars"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">将子元素按水平或垂直方向排列的简单布局控件，适合线性排列的UI元素。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;StackPanel</code> <code class="text-purple-700">Orientation</code><code class="text-red-700">=</code><code class="text-green-700">"Horizontal"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="按钮1" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="按钮2" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="按钮3" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/StackPanel&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">WrapPanel</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-th-large"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">当空间不足时自动换行的布局控件，适合需要自适应空间的元素集合。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;WrapPanel</code> <code class="text-purple-700">Orientation</code><code class="text-red-700">=</code><code class="text-green-700">"Horizontal"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="短按钮" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="稍长一点的按钮" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="很长的按钮示例" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/WrapPanel&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">DockPanel</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-arrows-alt"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">允许子元素停靠在边缘的布局控件，最后一个子元素通常占据剩余空间。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;DockPanel&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="顶部" DockPanel.Dock="Top" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="左侧" DockPanel.Dock="Left" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="填充剩余空间" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/DockPanel&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Canvas</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-paint-brush"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">绝对定位布局控件，子元素使用Canvas.Left、Canvas.Top等属性精确定位。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Canvas&gt;</code><br>
                        <code class="text-gray-500">  &lt;Rectangle Width="100" Height="100" Fill="Red"</code><br>
                        <code class="text-gray-500">             Canvas.Left="50" Canvas.Top="50" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Ellipse Width="50" Height="50" Fill="Blue"</code><br>
                        <code class="text-gray-500">            Canvas.Left="120" Canvas.Top="80" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/Canvas&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">UniformGrid</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-table"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">将空间均分为大小相等的单元格的布局控件，每个子元素占据一个单元格。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;UniformGrid</code> <code class="text-purple-700">Rows</code><code class="text-red-700">=</code><code class="text-green-700">"2"</code> <code class="text-purple-700">Columns</code><code class="text-red-700">=</code><code class="text-green-700">"2"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="1" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="2" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="3" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;Button Content="4" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/UniformGrid&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">InkCanvas</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-pencil"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">支持手写输入和墨迹的特殊Canvas，允许用户使用鼠标或触摸设备绘制。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;InkCanvas</code> <code class="text-purple-700">Background</code><code class="text-red-700">=</code><code class="text-green-700">"LightGray"</code><br>
                        <code class="text-gray-500">            Width="400" Height="300" /&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="layout">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Label</h3>
                            <p class="text-neutral text-sm">布局控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                            <i class="fa fa-tag"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">用于显示文本的控件，支持与其他控件关联，可通过点击标签聚焦关联控件。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Label</code> <code class="text-purple-700">Target</code><code class="text-red-700">=</code><code class="text-green-700">"#txtName"</code><code class="text-blue-700">&gt;</code>姓名:<code class="text-blue-700">&lt;/Label&gt;</code><br>
                        <code class="text-blue-700">&lt;TextBox</code> <code class="text-purple-700">x:Name</code><code class="text-red-700">=</code><code class="text-green-700">"txtName"</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <!-- 输入控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Button</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-square-o"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">基本的可点击按钮控件，用户点击后触发相应的操作。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Button</code> <code class="text-purple-700">Content</code><code class="text-red-700">=</code><code class="text-green-700">"点击我"</code><br>
                        <code class="text-gray-500">        Click</code><code class="text-red-700">=</code><code class="text-green-700">"Button_Click"</code><br>
                        <code class="text-gray-500">        Width</code><code class="text-red-700">=</code><code class="text-green-700">"100"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">RepeatButton</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-repeat"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">按住时会重复触发Click事件的按钮，适合需要连续执行的操作。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;RepeatButton</code> <code class="text-purple-700">Content</code><code class="text-red-700">=</code><code class="text-green-700">"增加"</code><br>
                        <code class="text-gray-500">                Delay</code><code class="text-red-700">=</code><code class="text-green-700">"500"</code><br>
                        <code class="text-gray-500">                Interval</code><code class="text-red-700">=</code><code class="text-green-700">"100"</code><br>
                        <code class="text-gray-500">                Click</code><code class="text-red-700">=</code><code class="text-green-700">"RepeatButton_Click"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">TextBox</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-font"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">单行文本输入控件，用于获取用户的文本输入。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;TextBox</code> <code class="text-purple-700">Text</code><code class="text-red-700">=</code><code class="text-green-700">"{Binding UserName}"</code><br>
                        <code class="text-gray-500">         Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><br>
                        <code class="text-gray-500">         HorizontalAlignment</code><code class="text-red-700">=</code><code class="text-green-700">"Left"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">PasswordBox</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">用于密码输入的特殊文本框，显示掩码字符而非实际输入的字符。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;PasswordBox</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><br>
                        <code class="text-gray-500">            PasswordChanged</code><code class="text-red-700">=</code><code class="text-green-700">"PasswordBox_PasswordChanged"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">RichTextBox</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-file-text-o"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">支持富文本编辑的文本框，可设置文本格式、插入图片等复杂内容。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;RichTextBox</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"400"</code> <code class="text-purple-700">Height</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">RadioButton</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-circle-o"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">单选按钮，同一组中只能选择一个，通常用于互斥选项的选择。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;RadioButton</code> <code class="text-purple-700">Content</code><code class="text-red-700">=</code><code class="text-green-700">"选项A"</code><br>
                        <code class="text-gray-500">             GroupName</code><code class="text-red-700">=</code><code class="text-green-700">"Options"</code><br>
                        <code class="text-gray-500">             IsChecked</code><code class="text-red-700">=</code><code class="text-green-700">"True"</code> <code class="text-blue-700">/&gt;</code><br>
                        <code class="text-blue-700">&lt;RadioButton</code> <code class="text-purple-700">Content</code><code class="text-red-700">=</code><code class="text-green-700">"选项B"</code><br>
                        <code class="text-gray-500">             GroupName</code><code class="text-red-700">=</code><code class="text-green-700">"Options"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">CheckBox</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-check-square-o"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">复选框，可独立选择或取消选择，适合多个非互斥选项的选择。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;CheckBox</code> <code class="text-purple-700">Content</code><code class="text-red-700">=</code><code class="text-green-700">"记住我"</code><br>
                        <code class="text-gray-500">            IsChecked</code><code class="text-red-700">=</code><code class="text-green-700">"True"</code> <code class="text-blue-700">/&gt;</code><br>
                        <code class="text-blue-700">&lt;CheckBox</code> <code class="text-purple-700">Content</code><code class="text-red-700">=</code><code class="text-green-700">"接收通知"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Slider</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-sliders"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">滑块控件，允许用户通过拖动滑块选择一个范围内的值。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Slider</code> <code class="text-purple-700">Minimum</code><code class="text-red-700">=</code><code class="text-green-700">"0"</code><br>
                        <code class="text-gray-500">        Maximum</code><code class="text-red-700">=</code><code class="text-green-700">"100"</code><br>
                        <code class="text-gray-500">        Value</code><code class="text-red-700">=</code><code class="text-green-700">"50"</code><br>
                        <code class="text-gray-500">        Orientation</code><code class="text-red-700">=</code><code class="text-green-700">"Horizontal"</code><br>
                        <code class="text-gray-500">        Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">ComboBox</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-chevron-down"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">下拉选择框，提供一个选项列表供用户选择，未展开时只显示当前选择项。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;ComboBox</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><br>
                        <code class="text-gray-500">            SelectedIndex</code><code class="text-red-700">=</code><code class="text-green-700">"0"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;ComboBoxItem Content="选项1" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;ComboBoxItem Content="选项2" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;ComboBoxItem Content="选项3" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/ComboBox&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="input">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">ProgressBar</h3>
                            <p class="text-neutral text-sm">输入控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-spinner"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">进度条控件，用于显示操作的完成进度，可显示确定或不确定的进度。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;ProgressBar</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><br>
                        <code class="text-gray-500">              Minimum</code><code class="text-red-700">=</code><code class="text-green-700">"0"</code><br>
                        <code class="text-gray-500">              Maximum</code><code class="text-red-700">=</code><code class="text-green-700">"100"</code><br>
                        <code class="text-gray-500">              Value</code><code class="text-red-700">=</code><code class="text-green-700">"45"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <!-- 显示控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="display">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Image</h3>
                            <p class="text-neutral text-sm">显示控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                            <i class="fa fa-image"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">用于显示图像的控件，支持多种图像格式。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Image</code> <code class="text-purple-700">Source</code><code class="text-red-700">=</code><code class="text-green-700">"/Images/logo.png"</code><br>
                        <code class="text-gray-500">        Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><br>
                        <code class="text-gray-500">        Stretch</code><code class="text-red-700">=</code><code class="text-green-700">"Uniform"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="display">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Calendar</h3>
                            <p class="text-neutral text-sm">显示控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                            <i class="fa fa-calendar"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">日历控件，允许用户选择日期或日期范围。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Calendar</code> <code class="text-purple-700">SelectedDate</code><code class="text-red-700">=</code><code class="text-green-700">"2023-01-01"</code><br>
                        <code class="text-gray-500">          DisplayDateStart</code><code class="text-red-700">=</code><code class="text-green-700">"2023-01-01"</code><br>
                        <code class="text-gray-500">          DisplayDateEnd</code><code class="text-red-700">=</code><code class="text-green-700">"2023-12-31"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="display">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">DatePicker</h3>
                            <p class="text-neutral text-sm">显示控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                            <i class="fa fa-calendar-o"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">日期选择器控件，结合了文本框和日历，方便用户选择日期。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;DatePicker</code> <code class="text-purple-700">SelectedDate</code><code class="text-red-700">=</code><code class="text-green-700">"{Binding BirthDate}"</code><br>
                        <code class="text-gray-500">            DisplayDate</code><code class="text-red-700">=</code><code class="text-green-700">"2023-01-01"</code> <code class="text-blue-700">/&gt;</code>
                    </div>
                </div>
            </div>
            
            <!-- 导航控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="navigation">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">TabControl</h3>
                            <p class="text-neutral text-sm">导航控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                            <i class="fa fa-folder-open-o"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">选项卡控件，将内容组织在多个选项卡中，用户可通过点击选项卡切换内容。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;TabControl&gt;</code><br>
                        <code class="text-gray-500">  &lt;TabItem Header="首页"&gt;</code><br>
                        <code class="text-gray-500">    &lt;TextBlock Text="首页内容" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/TabItem&gt;</code><br>
                        <code class="text-gray-500">  &lt;TabItem Header="设置"&gt;</code><br>
                        <code class="text-gray-500">    &lt;TextBlock Text="设置内容" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/TabItem&gt;</code><br>
                        <code class="text-blue-700">&lt;/TabControl&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="navigation">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Menu</h3>
                            <p class="text-neutral text-sm">导航控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                            <i class="fa fa-bars"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">菜单栏控件，用于创建应用程序的菜单系统，支持多级子菜单。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Menu&gt;</code><br>
                        <code class="text-gray-500">  &lt;MenuItem Header="文件"&gt;</code><br>
                        <code class="text-gray-500">    &lt;MenuItem Header="新建" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;MenuItem Header="打开" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/MenuItem&gt;</code><br>
                        <code class="text-gray-500">  &lt;MenuItem Header="编辑"&gt;</code><br>
                        <code class="text-gray-500">    &lt;MenuItem Header="复制" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;MenuItem Header="粘贴" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/MenuItem&gt;</code><br>
                        <code class="text-blue-700">&lt;/Menu&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="navigation">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">TreeView</h3>
                            <p class="text-neutral text-sm">导航控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                            <i class="fa fa-sitemap"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">树形视图控件，以层次结构显示数据，支持展开和折叠节点。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;TreeView&gt;</code><br>
                        <code class="text-gray-500">  &lt;TreeViewItem Header="计算机"&gt;</code><br>
                        <code class="text-gray-500">    &lt;TreeViewItem Header="本地磁盘 (C:)" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;TreeViewItem Header="本地磁盘 (D:)" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/TreeViewItem&gt;</code><br>
                        <code class="text-blue-700">&lt;/TreeView&gt;</code>
                    </div>
                </div>
            </div>
            
            <!-- 数据控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="data">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">ListBox</h3>
                            <p class="text-neutral text-sm">数据控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
                            <i class="fa fa-list-ul"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">列表框控件，显示项目列表，支持单选或多选。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;ListBox</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code> <code class="text-purple-700">Height</code><code class="text-red-700">=</code><code class="text-green-700">"150"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;ListBoxItem Content="项目1" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;ListBoxItem Content="项目2" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;ListBoxItem Content="项目3" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/ListBox&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="data">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">ListView</h3>
                            <p class="text-neutral text-sm">数据控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
                            <i class="fa fa-table"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">列表视图控件，比ListBox更灵活，支持多列数据显示和自定义视图。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;ListView</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"400"</code> <code class="text-purple-700">Height</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;ListView.View&gt;</code><br>
                        <code class="text-gray-500">    &lt;GridView&gt;</code><br>
                        <code class="text-gray-500">      &lt;GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}" /&gt;</code><br>
                        <code class="text-gray-500">      &lt;GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;/GridView&gt;</code><br>
                        <code class="text-gray-500">  &lt;/ListView.View&gt;</code><br>
                        <code class="text-blue-700">&lt;/ListView&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="data">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">DataGrid</h3>
                            <p class="text-neutral text-sm">数据控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
                            <i class="fa fa-th"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">数据网格控件，用于显示和编辑表格数据，支持排序、筛选和分页等功能。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;DataGrid</code> <code class="text-purple-700">ItemsSource</code><code class="text-red-700">=</code><code class="text-green-700">"{Binding People}"</code><br>
                        <code class="text-gray-500">          AutoGenerateColumns</code><code class="text-red-700">=</code><code class="text-green-700">"False"</code><br>
                        <code class="text-gray-500">          Height</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;DataGrid.Columns&gt;</code><br>
                        <code class="text-gray-500">    &lt;DataGridTextColumn Header="ID" Binding="{Binding Id}" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;DataGridTextColumn Header="姓名" Binding="{Binding Name}" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/DataGrid.Columns&gt;</code><br>
                        <code class="text-blue-700">&lt;/DataGrid&gt;</code>
                    </div>
                </div>
            </div>
            
            <!-- 对话框控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="dialog">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">OpenFileDialog</h3>
                            <p class="text-neutral text-sm">对话框控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600">
                            <i class="fa fa-folder-open"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">打开文件对话框，允许用户选择一个或多个文件。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">// C# 代码</code><br>
                        <code class="text-blue-700">OpenFileDialog</code> <code class="text-purple-700">openFileDialog</code> <code class="text-red-700">=</code> <code class="text-blue-700">new</code> <code class="text-blue-700">OpenFileDialog();</code><br>
                        <code class="text-purple-700">openFileDialog</code><code class="text-red-700">.</code><code class="text-blue-700">Filter</code> <code class="text-red-700">=</code> <code class="text-green-700">"文本文件 (*.txt)|*.txt|所有文件 (*.*)|*.*"</code>;<br>
                        <code class="text-blue-700">if</code> (<code class="text-purple-700">openFileDialog</code><code class="text-red-700">.</code><code class="text-blue-700">ShowDialog() == true)</code><br>
                        <code class="text-blue-700">{</code><br>
                        <code class="text-gray-500">    string fileName = openFileDialog.FileName;</code><br>
                        <code class="text-blue-700">}</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="dialog">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">SaveFileDialog</h3>
                            <p class="text-neutral text-sm">对话框控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600">
                            <i class="fa fa-save"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">保存文件对话框，允许用户指定文件名和保存位置。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">// C# 代码</code><br>
                        <code class="text-blue-700">SaveFileDialog</code> <code class="text-purple-700">saveFileDialog</code> <code class="text-red-700">=</code> <code class="text-blue-700">new</code> <code class="text-blue-700">SaveFileDialog();</code><br>
                        <code class="text-purple-700">saveFileDialog</code><code class="text-red-700">.</code><code class="text-blue-700">Filter</code> <code class="text-red-700">=</code> <code class="text-green-700">"文本文件 (*.txt)|*.txt|所有文件 (*.*)|*.*"</code>;<br>
                        <code class="text-blue-700">if</code> (<code class="text-purple-700">saveFileDialog</code><code class="text-red-700">.</code><code class="text-blue-700">ShowDialog() == true)</code><br>
                        <code class="text-blue-700">{</code><br>
                        <code class="text-gray-500">    string fileName = saveFileDialog.FileName;</code><br>
                        <code class="text-blue-700">}</code>
                    </div>
                </div>
            </div>
            
            <!-- 其他控件 -->
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="other">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Border</h3>
                            <p class="text-neutral text-sm">其他控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fa fa-square"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">用于为子元素提供边框和背景的装饰性控件。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Border</code> <code class="text-purple-700">BorderBrush</code><code class="text-red-700">=</code><code class="text-green-700">"Black"</code><br>
                        <code class="text-gray-500">        BorderThickness</code><code class="text-red-700">=</code><code class="text-green-700">"1"</code><br>
                        <code class="text-gray-500">        CornerRadius</code><code class="text-red-700">=</code><code class="text-green-700">"5"</code><br>
                        <code class="text-gray-500">        Padding</code><code class="text-red-700">=</code><code class="text-green-700">"10"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;TextBlock Text="带边框的文本" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/Border&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="other">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Expander</h3>
                            <p class="text-neutral text-sm">其他控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fa fa-chevron-down"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">可展开/折叠的容器控件，点击标题可显示或隐藏内容。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;Expander</code> <code class="text-purple-700">Header</code><code class="text-red-700">=</code><code class="text-green-700">"详细信息"</code><br>
                        <code class="text-gray-500">          IsExpanded</code><code class="text-red-700">=</code><code class="text-green-700">"False"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;StackPanel&gt;</code><br>
                        <code class="text-gray-500">    &lt;TextBlock Text="这是一些详细信息" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;Button Content="操作按钮" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/StackPanel&gt;</code><br>
                        <code class="text-blue-700">&lt;/Expander&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="other">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">GroupBox</h3>
                            <p class="text-neutral text-sm">其他控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fa fa-object-group"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">带标题的分组控件，用于将相关控件组织在一起。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;GroupBox</code> <code class="text-purple-700">Header</code><code class="text-red-700">=</code><code class="text-green-700">"个人信息"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;StackPanel Orientation="Vertical"&gt;</code><br>
                        <code class="text-gray-500">    &lt;TextBox Text="姓名" /&gt;</code><br>
                        <code class="text-gray-500">    &lt;TextBox Text="年龄" /&gt;</code><br>
                        <code class="text-gray-500">  &lt;/StackPanel&gt;</code><br>
                        <code class="text-blue-700">&lt;/GroupBox&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="other">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">ViewBox</h3>
                            <p class="text-neutral text-sm">其他控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fa fa-search-plus"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">可缩放内容的容器控件，会根据自身大小自动缩放子元素。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">&lt;ViewBox</code> <code class="text-purple-700">Width</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code> <code class="text-purple-700">Height</code><code class="text-red-700">=</code><code class="text-green-700">"200"</code><code class="text-blue-700">&gt;</code><br>
                        <code class="text-gray-500">  &lt;Rectangle Width="100" Height="100" Fill="Red" /&gt;</code><br>
                        <code class="text-blue-700">&lt;/ViewBox&gt;</code>
                    </div>
                </div>
            </div>
            
            <div class="control-card bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all transform hover:-translate-y-1 duration-300" data-category="other">
                <div class="p-5">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="font-bold text-lg">Dispatcher</h3>
                            <p class="text-neutral text-sm">其他控件</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fa fa-exchange"></i>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">WPF中的调度器，用于在UI线程上执行操作，处理跨线程更新UI的问题。</p>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm overflow-x-auto">
                        <code class="text-blue-700">// C# 代码</code><br>
                        <code class="text-blue-700">private</code> <code class="text-blue-700">void</code> <code class="text-purple-700">UpdateUIThreadSafe</code><code class="text-red-700">()</code><br>
                        <code class="text-blue-700">{</code><br>
                        <code class="text-gray-500">    if (this.Dispatcher.CheckAccess())</code><br>
                        <code class="text-gray-500">    {</code><br>
                        <code class="text-gray-500">        // 已经在UI线程上，可以直接更新UI</code><br>
                        <code class="text-gray-500">        textBlock.Text = "更新完成";</code><br>
                        <code class="text-gray-500">    }</code><br>
                        <code class="text-gray-500">    else</code><br>
                        <code class="text-gray-500">    {</code><br>
                        <code class="text-gray-500">        // 不在UI线程上，使用Dispatcher调度到UI线程</code><br>
                        <code class="text-gray-500">        this.Dispatcher.BeginInvoke(new Action(() =></code><br>
                        <code class="text-gray-500">        {</code><br>
                        <code class="text-gray-500">            textBlock.Text = "更新完成";</code><br>
                        <code class="text-gray-500">        }));</code><br>
                        <code class="text-gray-500">    }</code><br>
                        <code class="text-blue-700">}</code>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center space-x-2">
                        <i class="fa fa-windows text-primary text-2xl"></i>
                        <span class="font-bold text-xl">WPF控件参考手册</span>
                    </div>
                    <p class="text-gray-400 mt-2">为WPF开发者提供全面的控件参考</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-linkedin text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400">
                <p>&copy; 2023 WPF控件参考手册. 保留所有权利.</p>
            </div>
        </div>
    </footer>
    
    <!-- 脚本 -->
    <script>
        // 分类筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const categoryButtons = document.querySelectorAll('.category-btn, .mobile-category-btn');
            const controlCards = document.querySelectorAll('.control-card');
            const searchInput = document.getElementById('search-input');
            const mobileSearchInput = document.getElementById('mobile-search-input');
            const menuToggle = document.getElementById('menu-toggle');
            const closeMenu = document.getElementById('close-menu');
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileMenuContent = document.getElementById('mobile-menu-content');
            
            // 分类筛选
            categoryButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const category = this.getAttribute('data-category');
                    
                    // 更新按钮样式
                    categoryButtons.forEach(btn => {
                        btn.classList.remove('bg-primary', 'text-white');
                        btn.classList.add('bg-white', 'text-dark', 'hover:bg-gray-100');
                    });
                    this.classList.remove('bg-white', 'text-dark', 'hover:bg-gray-100');
                    this.classList.add('bg-primary', 'text-white');
                    
                    // 筛选卡片
                    controlCards.forEach(card => {
                        if (category === 'all' || card.getAttribute('data-category') === category) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 关闭移动菜单
                    if (mobileMenu.classList.contains('flex')) {
                        mobileMenu.classList.remove('flex');
                        mobileMenu.classList.add('hidden');
                        mobileMenuContent.classList.remove('translate-x-0');
                        mobileMenuContent.classList.add('-translate-x-full');
                    }
                });
            });
            
            // 搜索功能
            function searchControls(input) {
                const searchTerm = input.value.toLowerCase().trim();
                
                controlCards.forEach(card => {
                    const title = card.querySelector('h3').textContent.toLowerCase();
                    const description = card.querySelector('p').textContent.toLowerCase();
                    
                    if (title.includes(searchTerm) || description.includes(searchTerm)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            }
            
            searchInput.addEventListener('input', function() {
                searchControls(this);
            });
            
            mobileSearchInput.addEventListener('input', function() {
                searchControls(this);
            });
            
            // 移动菜单
            menuToggle.addEventListener('click', function() {
                mobileMenu.classList.remove('hidden');
                mobileMenu.classList.add('flex');
                setTimeout(() => {
                    mobileMenuContent.classList.remove('-translate-x-full');
                    mobileMenuContent.classList.add('translate-x-0');
                }, 10);
            });
            
            closeMenu.addEventListener('click', function() {
                mobileMenuContent.classList.remove('translate-x-0');
                mobileMenuContent.classList.add('-translate-x-full');
                setTimeout(() => {
                    mobileMenu.classList.remove('flex');
                    mobileMenu.classList.add('hidden');
                }, 300);
            });
            
            // 点击菜单外部关闭菜单
            mobileMenu.addEventListener('click', function(e) {
                if (e.target === this) {
                    mobileMenuContent.classList.remove('translate-x-0');
                    mobileMenuContent.classList.add('-translate-x-full');
                    setTimeout(() => {
                        mobileMenu.classList.remove('flex');
                        mobileMenu.classList.add('hidden');
                    }, 300);
                }
            });
            
            // 滚动效果
            window.addEventListener('scroll', function() {
                const header = document.querySelector('header');
                if (window.scrollY > 10) {
                    header.classList.add('py-2');
                    header.classList.remove('py-3');
                    header.classList.add('shadow-md');
                } else {
                    header.classList.remove('py-2');
                    header.classList.add('py-3');
                    header.classList.remove('shadow-md');
                }
            });
        });
    </script>
</body>
</html>
    